<template>
  <div class='container'>
    <el-card>
      <el-form ref="form" :model="query" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="搜索">
              <el-input v-model="query.keyword" placeholder="根据编号搜索"> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="18" style="text-align:right;">
            <el-button size="small" @click="clear()">清除</el-button>
            <el-button size="small" type="primary" @click="onSearch()">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
       <el-alert :title="'数据一共' + count + '条'" type="info" :closable="false" show-icon></el-alert>

        <template>
        <el-table :data="data" style="width: auto">
          <el-table-column prop="id" label="编号" width="220"> </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80" :formatter="questionTypeFormatterFn">
          </el-table-column>
          <el-table-column label="题目编号" width="220">
         <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.questionIDs" :key="index">
                <p class="number" @click="preview(item.id)">{{ item.number }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180"> </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="222"> </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="222"> </el-table-column>
          <el-table-column prop="userName" label="录入人" width="222"> </el-table-column>
          <el-table-column label="操作" width="80">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" plain circle @click="remove(scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
       <!-- 分页功能 -->
      <el-pagination
        style="text-align: right; margin-top: 20px; margin-bottom: 15px;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[20, 30, 50,100]"
        :page-size="query.pagesize"
        layout="prev, pager, next, sizes, jumper"
        background
        :total="count"
      >
      </el-pagination>
    </el-card>
    <questions-preview :dialogVisible="dialogVisible" @close="dialogVisible = false" :questionItem="questionItem"></questions-preview>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions.js'
import questionsPreview from '../components/questions-preview'

// 题型
const questionTypenum = {
  // 题型
  hireType: [
    {
      id: 1,
      value: '多选'
    },
    {
      id: 2,
      value: '单选'
    },
    {
      id: 3,
      value: '简答'
    }
  ]
}
export default {
  data () {
    return {
      // 查询信息
      query: {
        pagesize: 20,
        page: 1,
        keyword: ''
      },
      // 查询总条目
      count: 0,
      // 表单数据
      data: [],
      questionItem: {}, // 预览时传入子组件的试题
      dialogVisible: false// 试题预览
    }
  },
  mounted () {
    this.getRandoms()
  },
  components: {
    questionsPreview
  },
  methods: {
    // 格式化 -> 题型列
    questionTypeFormatterFn (row) {
      // 用数组的 find 方法找到 id = 1 的元素，再取出它的 value
      const obj = questionTypenum.hireType.find(item => item.id === row.questionType * 1)
      return obj ? obj.value : '未知'
    },
    // 点击预览
    async preview (id) {
      // 显示对话框
      this.dialogVisible = true
      const { data: res } = await detail(id)
      // 传入试题
      this.questionItem = res
    },
    // 搜索清除
    clear () {
      this.query.keyword = ''
      this.query.page = 1
      this.getRandoms()
    },
    // 搜索
    onSearch () {
      this.query.page = 1
      this.getRandoms()
    },
    // 获取列表
    async getRandoms () {
      const { data } = await randoms(this.query)
      this.data = data.items
      this.count = data.counts
    },
    // 页码变化
    handleSizeChange (val) {
      this.query.pagesize = val
      this.getRandoms()
    },
    // 当前页变化
    handleCurrentChange (val) {
      this.query.page = val
      this.getRandoms()
    },
    // 删除
    async remove (item) {
      const res = await this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (res === 'confirm') {
        await removeRandoms(item)
        this.$message.success('删除题组成功')
        this.getRandoms()
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.number {
  color: #09f;
  cursor: pointer;
  line-height: 10px;
}
</style>
